import 'package:fashion_app/pages/closetPages/mock.dart';
import 'package:flutter/material.dart';

class LeftNavBar extends StatelessWidget {
  final List<ClothType> clothTypeList;
  const LeftNavBar({Key? key, required this.clothTypeList}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 16),
      height: double.infinity,
      color: Colors.white, // 导航栏背景色
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ...clothTypeList
              .map(
                (item) => LeftNavBarItem(
                  title: item.clothTypeName,
                  icon: item.icon,
                  isSelected: false,
                  onTap: () => {print(item.clothType)},
                ),
              )
              .toList(),
        ],
      ),
    );
  }
}

class LeftNavBarItem extends StatefulWidget {
  final String title; // 导航项标题
  final Icon icon; // 导航项图标
  final bool isSelected; // 是否选中
  final VoidCallback onTap; // 点击回调

  const LeftNavBarItem({
    Key? key,
    required this.title,
    required this.icon,
    required this.isSelected,
    required this.onTap,
  }) : super(key: key);

  @override
  State<LeftNavBarItem> createState() => _LeftNavBarItemState();
}

class _LeftNavBarItemState extends State<LeftNavBarItem> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onTap,
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
        color: widget.isSelected ? Colors.blue[100] : Colors.transparent,
        child: Column(
          children: [
            Icon(
              widget.icon.icon,
              color: widget.isSelected ? Colors.blue : Colors.grey[700],
            ),
            const SizedBox(height: 4),
            Text(
              widget.title,
              style: TextStyle(
                color: widget.isSelected ? Colors.blue : Colors.grey[700],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
